<template>
  <div class="base-app-card-box">
    <el-card>
      <template #header>
        <div class="base-app-card-box-header">
          <el-text>应用日活量</el-text>
          <div class="btns">
            <el-tooltip content="刷新" placement="bottom" effect="light">
              <el-icon size="1em" @click="chartDisplay">
                <Refresh />
              </el-icon>
            </el-tooltip>
            <el-tooltip content="更多" placement="bottom" effect="light">
              <el-icon size="1em" @click="">
                <More />
              </el-icon>
            </el-tooltip>
          </div>
        </div>
      </template>
      <div v-loading="loading" element-loading-text="数据加载中...">
        <EChart ref="echartRef" container="echart" :echart-options="option"></EChart>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { EChart } from '@package/ui/vue';
import { appStatistics } from '@/api';
// 图表配置项
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar'
    }
  ]
}
const loading = ref(false);
// 获取图表数据
const loadData = async () => {
  loading.value = true;
  const { result } = await appStatistics({type: 'day'});
  if(result){
    option.xAxis.data = result.xAxis;
    option.series[0].data = result.yAxis;
  }
  loading.value = false;
}
// 绘制图表
const echartRef = ref();
const drawChart = () => {
  echartRef.value?.draw()
}
// 图表显示
const chartDisplay = async() => {
  await loadData();
  drawChart();
}
onMounted(()=>{
  chartDisplay()
})
</script>
<style lang="scss" scoped>
.base-app-card-box-header {
  display: flex;
  flex-direction: row;
  align-items: center;

  .btns {
    flex: 1;
    display: flex;
    justify-content: end;
    i{
      cursor: pointer;
      padding: 0 5px;
    }
  }
}

.base-app-card-box {
  flex: 1;
  box-sizing: border-box;
  margin: 1em;

  &-header {
    font-size: 1.4em;
  }

}
</style>